<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号中心 - 燕云十六声</title>
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus -->
    <link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet">
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 引入艺术字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 确保星星和装饰元素的动画流畅 */
        .star, .decoration-path {
            will-change: transform, opacity;
            transform: translateZ(0);
        }
        
        /* 创建动态黑色背景 */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #ffffff; /* 白色文字，确保在黑色背景上清晰可见 */
            background-color: #000000;
            position: relative;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }
        
        /* 动态星空背景 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            z-index: -2;
        }
        
        /* 动态水墨效果 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
                radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
            animation: inkFlow 20s ease-in-out infinite alternate;
            z-index: -1;
        }
        
        /* 水墨流动动画 */
        @keyframes inkFlow {
            0% {
                background-position: 0% 0%, 0% 0%, 0% 0%;
            }
            100% {
                background-position: 100% 100%, 50% 50%, 80% 20%;
            }
        }
        
        /* 动态星星效果 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -3;
        }
        
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }
        
        @keyframes twinkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* 古风动态装饰 */
        .ancient-decoration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -4;
            opacity: 0.05;
        }
        
        .decoration-path {
            stroke: white;
            stroke-width: 1;
            fill: none;
            animation: pathFlow 30s linear infinite;
        }
        
        @keyframes pathFlow {
            0% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
            padding: 15px 0;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(245, 215, 110, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #f5d76e;
            font-size: 20px;
            font-weight: bold;
        }
        
        .logo svg {
            margin-right: 8px;
        }
        
        .logo span {
            margin-left: 10px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
        }
        
        .nav-links a:hover {
            color: #f5d76e;
        }
        
        .auth-buttons {
            display: flex;
            align-items: center;
        }
        
        .login-button, .logout-button {
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 15px;
            border: none;
            text-decoration: none;
            display: inline-block;
        }
        
        .login-button {
            background: linear-gradient(45deg, #f5d76e 0%, #f1c40f 100%);
            color: #1a1a2e;
        }
        
        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 215, 110, 0.4);
        }
        
        .logout-button {
            background: #e74c3c;
            color: white;
        }
        
        .logout-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        }
        
        /* 用户信息显示 */
        .user-info {
            display: flex;
            align-items: center;
            margin-left: 15px;
            color: white;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f5d76e;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: bold;
            color: #1a1a2e;
        }
        
        /* 账号中心容器 */
        .account-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        /* 页面标题 */
        .page-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
            color: #f5d76e;
            font-family: 'Ma Shan Zheng', cursive;
        }
        
        /* 账号中心布局 */
        .account-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
        }
        
        /* 侧边栏样式 */
        .account-sidebar {
            background: rgba(26, 26, 46, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            border: 1px solid rgba(245, 215, 110, 0.1);
            height: fit-content;
        }
        
        /* 用户信息卡片 */
        .user-profile-card {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            font-weight: bold;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        .profile-username {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .profile-level {
            color: #f5d76e;
            font-size: 14px;
        }
        
        /* 导航菜单 */
        .nav-menu {
            list-style: none;
        }
        
        .nav-menu-item {
            margin-bottom: 10px;
        }
        
        .nav-menu-link {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            color: #ffffff;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 16px;
        }
        
        .nav-menu-link:hover {
            background: rgba(245, 215, 110, 0.1);
            color: #f5d76e;
        }
        
        .nav-menu-link.active {
            background: linear-gradient(135deg, rgba(245, 215, 110, 0.2) 0%, rgba(241, 196, 15, 0.1) 100%);
            color: #f5d76e;
            border-left: 3px solid #f5d76e;
        }
        
        .nav-menu-icon {
            margin-right: 12px;
            font-size: 18px;
        }
        
        /* 主内容区域 */
        .account-main-content {
            background: rgba(26, 26, 46, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            border: 1px solid rgba(245, 215, 110, 0.1);
        }
        
        /* 内容区块 */
        .content-section {
            margin-bottom: 40px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
        }
        
        .section-action {
            color: #f5d76e;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }
        
        .section-action:hover {
            color: #f1c40f;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #f5d76e;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 角色卡片 */
        .characters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .character-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .character-image {
            height: 150px;
            background: linear-gradient(45deg, #f5d76e 0%, #f1c40f 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        
        .character-info {
            padding: 20px;
        }
        
        .character-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .character-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 最近活动 */
        .activity-list {
            list-style: none;
        }
        
        .activity-item {
            display: flex;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .activity-icon {
            margin-right: 15px;
            font-size: 20px;
            color: #f5d76e;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-title {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .activity-time {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #f5d76e 0%, #f1c40f 100%);
            color: #1a1a2e;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 215, 110, 0.4);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #ffffff;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            color: #ffffff;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #f5d76e;
        }
        
        /* 安全设置项 */
        .security-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .security-info h4 {
            margin-bottom: 5px;
        }
        
        .security-info p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 没有登录的提示 */
        .login-required {
            text-align: center;
            padding: 80px 20px;
        }
        
        .login-required h3 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .login-required p {
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 页脚 */
        footer {
            background: rgba(26, 26, 46, 0.9);
            color: white;
            padding: 40px 0;
            margin-top: 60px;
            border-top: 1px solid rgba(245, 215, 110, 0.1);
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .footer-column h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #f5d76e;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h4:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: #f5d76e;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-column ul li a:hover {
            color: #f5d76e;
            padding-left: 5px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid #333;
            color: #888;
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .account-layout {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .header-content {
                flex-direction: column;
                padding: 10px;
            }
            
            .nav-links {
                margin-top: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .nav-links li {
                margin: 5px 10px;
            }
            
            .auth-buttons {
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="header-content">
            <a href="yanyun-official.html" class="logo">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 2L2 10V22L16 30L30 22V10L16 2Z" stroke="#f5d76e" stroke-width="2" fill="none"/>
                    <path d="M16 8V24" stroke="#f5d76e" stroke-width="2"/>
                    <path d="M6 12L26 12" stroke="#f5d76e" stroke-width="2"/>
                </svg>
                <span>燕云十六声</span>
            </a>
            <div style="display: flex; align-items: center;
            ">                <nav>
                    <ul class="nav-links">
                        <li><a href="yanyun-official.html">首页</a></li>
                        <li><a href="yanyun-official.html#about">游戏介绍</a></li>
                        <li><a href="yanyun-official.html#features">游戏特色</a></li>
                        <li><a href="yanyun-official.html#background">历史背景</a></li>
                        <li><a href="account-center.html" style="color: #f5d76e;">账号中心</a></li>
                    </ul>
                </nav>
                <div class="auth-buttons">
                    <!-- 登录功能已移除 -->
                </div>
            </div>
        </div>
    </header>

    <div class="account-container">
        <h1 class="page-title">账号中心</h1>
        
    
        
        <!-- 已登录状态 - 账号中心内容 -->
        <div id="account-dashboard" style="display: none;">
            <div class="account-layout">
                <!-- 侧边栏 -->
                <aside class="account-sidebar">
                    <!-- 用户信息卡片 -->
                    <div class="user-profile-card">
                        <div class="profile-avatar" id="profile-avatar"></div>
                        <h3 class="profile-username" id="profile-username">玩家名称</h3>
                        <p class="profile-level">账号等级: <span id="profile-level">1</span></p>
                    </div>
                    
                    <!-- 导航菜单 -->
                    <ul class="nav-menu">
                        <li class="nav-menu-item">
                            <a href="#dashboard" class="nav-menu-link active" data-section="dashboard">
                                <span class="nav-menu-icon">📊</span>
                                <span>数据总览</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#characters" class="nav-menu-link" data-section="characters">
                                <span class="nav-menu-icon">🎮</span>
                                <span>角色管理</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#friends" class="nav-menu-link" data-section="friends">
                                <span class="nav-menu-icon">👥</span>
                                <span>好友系统</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#inventory" class="nav-menu-link" data-section="inventory">
                                <span class="nav-menu-icon">🎒</span>
                                <span>背包道具</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#achievements" class="nav-menu-link" data-section="achievements">
                                <span class="nav-menu-icon">🏆</span>
                                <span>成就系统</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#settings" class="nav-menu-link" data-section="settings">
                                <span class="nav-menu-icon">⚙️</span>
                                <span>账号设置</span>
                            </a>
                        </li>
                        <li class="nav-menu-item">
                            <a href="#security" class="nav-menu-link" data-section="security">
                                <span class="nav-menu-icon">🔒</span>
                                <span>安全中心</span>
                            </a>
                        </li>
                    </ul>
                </aside>
                
                <!-- 主内容区域 -->
                <main class="account-main-content">
                    <!-- 数据总览 -->
                    <div id="dashboard-section" class="content-section">
                        <div class="section-header">
                            <h2 class="section-title">数据总览</h2>
                        </div>
                        
                        <!-- 统计数据 -->
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-value" id="play-time">0</div>
                                <div class="stat-label">游戏时长 (小时)</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value" id="character-count">0</div>
                                <div class="stat-label">创建角色</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value" id="achievement-count">0</div>
                                <div class="stat-label">已解锁成就</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value" id="friends-count">0</div>
                                <div class="stat-label">好友数量</div>
                            </div>
                        </div>
                        
                        <!-- 最近活动 -->
                        <div class="content-section">
                            <div class="section-header">
                                <h2 class="section-title">最近活动</h2>
                                <a href="#" class="section-action">查看全部</a>
                            </div>
                            <ul class="activity-list">
                                <li class="activity-item">
                                    <span class="activity-icon">🎮</span>
                                    <div class="activity-content">
                                        <div class="activity-title">登录游戏</div>
                                        <div class="activity-time">今天 14:30</div>
                                    </div>
                                </li>
                                <li class="activity-item">
                                    <span class="activity-icon">🏆</span>
                                    <div class="activity-content">
                                        <div class="activity-title">解锁新成就：「初入江湖」</div>
                                        <div class="activity-time">昨天 19:45</div>
                                    </div>
                                </li>
                                <li class="activity-item">
                                    <span class="activity-icon">🎒</span>
                                    <div class="activity-content">
                                        <div class="activity-title">获得稀有道具：「玄铁剑」</div>
                                        <div class="activity-time">3天前</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 角色管理 -->
                    <div id="characters-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">角色管理</h2>
                            <a href="#" class="section-action">创建新角色</a>
                        </div>
                        <div class="characters-grid">
                            <div class="character-card">
                                <div class="character-image">⚔️</div>
                                <div class="character-info">
                                    <h3 class="character-name">李逍遥</h3>
                                    <div class="character-details">
                                        <span>等级：45</span>
                                        <span>门派：华山派</span>
                                    </div>
                                    <div class="character-details" style="margin-top: 5px;">
                                        <span>战力：8500</span>
                                        <span>创建：1个月前</span>
                                    </div>
                                </div>
                            </div>
                            <div class="character-card">
                                <div class="character-image">🗡️</div>
                                <div class="character-info">
                                    <h3 class="character-name">赵敏</h3>
                                    <div class="character-details">
                                        <span>等级：38</span>
                                        <span>门派：峨眉派</span>
                                    </div>
                                    <div class="character-details" style="margin-top: 5px;">
                                        <span>战力：6200</span>
                                        <span>创建：2周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 好友系统 -->
                    <div id="friends-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">好友系统</h2>
                            <a href="#" class="section-action">添加好友</a>
                        </div>
                        <div style="text-align: center; padding: 40px;">
                            <p>您当前有 <span style="color: #f5d76e; font-weight: bold;">12</span> 位好友</p>
                            <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">好友列表功能正在加载中...</p>
                        </div>
                    </div>
                    
                    <!-- 背包道具 -->
                    <div id="inventory-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">背包道具</h2>
                            <a href="#" class="section-action">整理背包</a>
                        </div>
                        <div style="text-align: center; padding: 40px;">
                            <p>您的背包中有 <span style="color: #f5d76e; font-weight: bold;">28</span> 件道具</p>
                            <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">背包系统正在加载中...</p>
                        </div>
                    </div>
                    
                    <!-- 成就系统 -->
                    <div id="achievements-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">成就系统</h2>
                            <a href="#" class="section-action">查看全部成就</a>
                        </div>
                        <div style="text-align: center; padding: 40px;">
                            <p>您已解锁 <span style="color: #f5d76e; font-weight: bold;">15</span>/<span>120</span> 个成就</p>
                            <p style="color: rgba(255, 255, 255, 0.7); margin-top: 10px;">成就系统正在加载中...</p>
                        </div>
                    </div>
                    
                    <!-- 账号设置 -->
                    <div id="settings-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">账号设置</h2>
                        </div>
                        <form>
                            <div class="form-group">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-input" id="username-input" disabled>
                            </div>
                            <div class="form-group">
                                <label class="form-label">昵称</label>
                                <input type="text" class="form-input" id="nickname-input">
                            </div>
                            <div class="form-group">
                                <label class="form-label">联系邮箱</label>
                                <input type="email" class="form-input" id="email-input">
                            </div>
                            <div class="form-group">
                                <label class="form-label">个性签名</label>
                                <textarea class="form-input" rows="3" id="bio-input"></textarea>
                            </div>
                            <button type="button" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                    
                    <!-- 安全中心 -->
                    <div id="security-section" class="content-section" style="display: none;">
                        <div class="section-header">
                            <h2 class="section-title">安全中心</h2>
                        </div>
                        <div class="security-item">
                            <div class="security-info">
                                <h4>修改密码</h4>
                                <p>定期修改密码可以保护账号安全</p>
                            </div>
                            <button class="btn btn-secondary">立即修改</button>
                        </div>
                        <div class="security-item">
                            <div class="security-info">
                                <h4>绑定手机</h4>
                                <p>未绑定</p>
                            </div>
                            <button class="btn btn-secondary">立即绑定</button>
                        </div>
                        <div class="security-item">
                            <div class="security-info">
                                <h4>实名认证</h4>
                                <p>未认证</p>
                            </div>
                            <button class="btn btn-secondary">立即认证</button>
                        </div>
                        <div class="security-item">
                            <div class="security-info">
                                <h4>登录设备管理</h4>
                                <p>管理已登录的设备</p>
                            </div>
                            <button class="btn btn-secondary">查看</button>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h4>游戏介绍</h4>
                <ul>
                    <li><a href="yanyun-official.html#about">游戏背景</a></li>
                    <li><a href="yanyun-official.html#features">游戏特色</a></li>
                    <li><a href="yanyun-official.html#background">历史背景</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>账号服务</h4>
                <ul>
                    <li><a href="account-center.html">账号中心</a></li>
                    <li><a href="#">找回密码</a></li>
                    <li><a href="#">账号注册</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>支持与帮助</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li><a href="yanyun-official.html#notice">家长须知</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">用户协议</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2023 燕云十六声 版权所有 | 网络游戏备案号：文网游备字[2023]XXXX号</p>
        </div>
    </footer>



    <script>
        // 生成动态星星效果
        document.addEventListener('DOMContentLoaded', function() {
            // 优先检查登录状态
            checkLoginStatus();
            
            // 创建星星容器
            const starsContainer = document.createElement('div');
            starsContainer.className = 'stars';
            document.body.appendChild(starsContainer);
            
            // 创建古风装饰SVG
            const decorationSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            decorationSVG.className = 'ancient-decoration';
            decorationSVG.setAttribute('width', '100%');
            decorationSVG.setAttribute('height', '100%');
            document.body.appendChild(decorationSVG);
            
            // 生成星星
            const starCount = 100;
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                
                const size = Math.random() * 2 + 1;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                
                const delay = Math.random() * 5;
                star.style.animationDelay = `${delay}s`;
                
                const duration = Math.random() * 5 + 2;
                star.style.animationDuration = `${duration}s`;
                
                starsContainer.appendChild(star);
            }
            
            // 生成古风装饰路径
            generateAncientDecoration(decorationSVG);
            
            // 移除登录相关事件监听
            
            // 导航菜单切换
            document.querySelectorAll('.nav-menu-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    switchSection(this.getAttribute('data-section'));
                });
            });
        });
        
        // 生成古风装饰路径
        function generateAncientDecoration(svg) {
            const pathCount = 6;
            
            for (let i = 0; i < pathCount; i++) {
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.className = 'decoration-path';
                path.setAttribute('stroke-dasharray', '1000');
                
                if (i % 3 === 0) {
                    const startY = 100 + (i * 150);
                    path.setAttribute('d', `M0,${startY} Q200,${startY-50} 400,${startY} T800,${startY} T1200,${startY} T1600,${startY}`);
                } else if (i % 3 === 1) {
                    const startY = 200 + (i * 100);
                    path.setAttribute('d', `M0,${startY} C300,${startY-80} 500,${startY+80} 800,${startY} C1100,${startY-80} 1300,${startY+80} 1600,${startY}`);
                } else {
                    const cx = 400 + (i * 300);
                    const cy = 300 + (i * 50);
                    const r = 150 + (i * 20);
                    path.setAttribute('d', `M${cx+r},${cy} A${r},${r} 0 1,1 ${cx-r},${cy} A${r},${r} 0 1,1 ${cx+r},${cy}`);
                }
                
                const delay = Math.random() * 10;
                path.style.animationDelay = `${delay}s`;
                
                const opacity = 0.3 + (Math.random() * 0.7);
                path.style.opacity = opacity;
                
                svg.appendChild(path);
            }
            
            for (let i = 0; i < 4; i++) {
                const cloudPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                cloudPath.className = 'decoration-path';
                cloudPath.setAttribute('stroke-dasharray', '800');
                
                const startX = i * 400;
                const startY = 150 + (i * 200);
                
                cloudPath.setAttribute('d', `M${startX},${startY} C${startX+30},${startY-20} ${startX+60},${startY-20} ${startX+90},${startY} C${startX+120},${startY-20} ${startX+150},${startY-20} ${startX+180},${startY} C${startX+180},${startY+20} ${startX},${startY+20} ${startX},${startY}`);
                
                const delay = Math.random() * 8;
                cloudPath.style.animationDelay = `${delay}s`;
                
                svg.appendChild(cloudPath);
            }
        }
        
        // 显示账号中心 - 检查登录状态
        function checkLoginStatus() {
            try {
                // 首先检查localStorage中的登录状态
                const user = localStorage.getItem('loggedInUser');
                
                if (!user) {
                    // 如果用户未登录，重定向到首页
                    console.log('用户未登录，重定向到首页');
                    window.location.href = 'yanyun-official.html';
                    return;
                }
                
                // 使用localStorage中的用户数据
                const userData = JSON.parse(user);
                
                // 如果用户数据不完整，补充必要的字段
                const completeUserData = {
                    username: userData.username || '江湖侠士',
                    level: userData.level || 45,
                    vipLevel: userData.vipLevel || 3,
                    avatar: userData.avatar || 'https://picsum.photos/id/1/200/200',
                    playTime: userData.playTime || 120,
                    characterCount: userData.characterCount || 3,
                    achievementCount: userData.achievementCount || 25,
                    friendsCount: userData.friendsCount || 15
                };
                
                console.log('显示账号中心:', completeUserData);
                document.getElementById('account-dashboard').style.display = 'block';
                
                // 更新用户信息显示
                const userAvatar = document.getElementById('profile-avatar');
                const userName = document.getElementById('profile-username');
                const userLevel = document.getElementById('profile-level');
                
                if (userAvatar) {
                    const colors = ['#f5d76e', '#e74c3c', '#3498db', '#2ecc71', '#9b59b6'];
                    userAvatar.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    userAvatar.textContent = completeUserData.username.charAt(0).toUpperCase();
                }
                if (userName) userName.textContent = completeUserData.username;
                if (userLevel) userLevel.textContent = completeUserData.level;
                
                // 更新统计数据
                if (document.getElementById('play-time')) document.getElementById('play-time').textContent = completeUserData.playTime;
                if (document.getElementById('character-count')) document.getElementById('character-count').textContent = completeUserData.characterCount;
                if (document.getElementById('achievement-count')) document.getElementById('achievement-count').textContent = completeUserData.achievementCount;
                if (document.getElementById('friends-count')) document.getElementById('friends-count').textContent = completeUserData.friendsCount;
                
                // 更新账号设置表单
                if (document.getElementById('username-input')) document.getElementById('username-input').value = completeUserData.username;
                
                // 更新头部导航中的用户信息
                const authButtons = document.querySelector('.auth-buttons');
                if (authButtons) {
                    const avatarBg = ['#f5d76e', '#e74c3c', '#3498db', '#2ecc71', '#9b59b6'][Math.floor(Math.random() * 5)];
                    authButtons.innerHTML = `
                        <div class="user-info">
                            <div class="user-avatar" style="background-color: ${avatarBg};">${completeUserData.username.charAt(0).toUpperCase()}</div>
                            <span>${completeUserData.username}</span>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('显示账号中心时出错:', error);
            }
        }
        

        
        // 切换内容区块
        function switchSection(sectionId) {
            // 隐藏所有区块
            document.querySelectorAll('.content-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 移除所有活动状态
            document.querySelectorAll('.nav-menu-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 显示选中区块
            document.getElementById(`${sectionId}-section`).style.display = 'block';
            
            // 添加活动状态
            const activeLink = document.querySelector(`.nav-menu-link[data-section="${sectionId}"]`);
            if (activeLink) {
                activeLink.classList.add('active');
            }
        };
    </script>
</body>
</html>